<style lang="scss" scoped>
	@import '../../assets/login.scss';

	.tip {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		div {
			display: inline-block;
			margin-right: 0.2rem;
		}
	}
</style>

<template>
	<div class="login-container">
		<van-nav-bar title="注册" left-text="返回" left-arrow @click-left="$router.back()" />
		<van-form class="form" @submit="registerFn">
			<div class="form-item">
				<van-field v-model="form.phone" label="手机号码" name="phone" type="number" placeholder="请输入手机号码"
					size="large" :rules="[{required:true,pattern:/^[1]([3-9])[0-9]{9}$/}]" center clearable></van-field>
			</div>
			<div class="form-item">
				<van-field v-model="form.password" label="用户密码" name="password" type="password" placeholder="请输入密码"
					size="large" :rules="[{required:true}]" center clearable></van-field>
			</div>
			<div class="form-item">
				<van-field v-model="form.repeatPassword" label="确认密码" name="repeatPassword" type="password"
					placeholder="请再次输入密码" size="large" :rules="[{required:true,validator:validatorPassword}]" center
					clearable></van-field>
			</div>
			<div class="form-item">
				<van-field v-model="form.imgCode" label="图片验证码" name="imgCode" :rules="[{required:true}]" center
					clearable placeholder="请输入图片验证码">
					<template slot="button">
						<van-image width="1.7rem" height="0.6rem" :src="imgCodeImg" @click="refreshImgCode"></van-image>
					</template>
				</van-field>
			</div>
			<div class="form-item">
				<van-field v-model="form.code" label="短信验证码" name="code" :rules="[{required:true}]" center clearable
					placeholder="请输入短信验证码">
					<template slot="button">
						<van-button v-if="!showCountDown" size="small" type="primary" color="#179AFE"
							style="width:1.7rem;" native-type="button" @click.stop="sendCode">发送验证码</van-button>
						<van-count-down v-else ref="countDown" :time="60 * 1000" use-slot :auto-start="false"
							@change="timeChange" @finish="countDownFinish">
							<span class="time"> {{ timeData.seconds }}秒后重新获取</span>
						</van-count-down>
					</template>
				</van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" :disabled="disabled" native-type="submit" block>注册
				</van-button>
				<div class="tip">
					<van-checkbox v-model="checked" icon-size="14px">
					</van-checkbox>
					<div>
						我已阅读并同意
						<router-link :to="{ name: 'Agreement'}">《服务协议》</router-link>
					</div>
				</div>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		isPhone
	} from '../../utils/validate';
	import {
		baseUrl,
		getCode,
		register
	} from '../../api';

	export default {
		name: 'Register',
		data() {
			return {
				imgCodeImg: baseUrl + 'authImage', //图片验证码地址
				form: {
					phone: '',
					password: '',
					repeatPassword: '',
					imgCode: '',
					code: ''
				},
				showCountDown: false,
				timeData: {},
				checked: true,
				isSending: false
			};
		},
		computed: {
			disabled() {
				return !this.checked || this.isSending === true;
			}
		},
		methods: {
			validatorPassword(val) {
				return this.form.password === this.form.repeatPassword;
			},
			refreshImgCode() {
				this.imgCodeImg = this.imgCodeImg + `?time=${new Date().getTime()}`;
			},
			timeChange(time) {
				this.timeData = time;
			},
			countDownFinish() {
				this.showCountDown = false;
				this.refreshImgCode();
			},
			async sendCode() {
				if (!isPhone(this.form.phone) || !this.form.imgCode) {
					this.$toast('请输入手机号和图片验证码!');
					return;
				} else {
					try {
						const codeParams = {
							phonenum: this.form.phone,
							imgcode: this.form.imgCode
						};

						const {
							errorcode,
							errormsg
						} = await getCode('getregistcode', codeParams);

						if (errorcode == 0) {
							this.$toast('发送成功,请注意查收');

							this.showCountDown = true;

							this.$nextTick(() => {
								this.$refs.countDown.start();
							});
						} else {
							this.$toast(errormsg);
						}
					} catch (error) {
						this.showCountDown = false;
						console.log(error);
					}
				}
			},
			async registerFn() {
				try {
					const regParams = {
						phonenum: this.form.phone,
						passwd: this.form.password,
						code: this.form.code,
						invitecode: ''
					};

					this.isSending = true;

					const {
						errorcode,
						errormsg
					} = await register(regParams);

					if (errorcode == 0) {
						this.$toast(errormsg || '注册成功');
						this.$router.replace('/');
					} else {
						this.$toast(errormsg);
					}

					this.isSending = false;
				} catch (error) {
					console.log(error);
					this.isSending = false;
				}
			}
		}
	};
</script>
